<template>
  <contents class="wantBuy-detail" :heightInclude="['navBar', 'tabBar']">
    <u-navbar
      title=""
      title-color="#fff"
      back-icon-color="#fff"
      :background="{ background: '#0049AC' }"
    >
      <view class="navbar-tabs">
        <u-tabs
          inactive-color="#fff"
          active-color="#fff"
          item-width="150"
          bg-color="#0049AC"
          :list="list"
          :is-scroll="false"
          :current="current"
          @change="tabsChange"
        ></u-tabs>
      </view>
    </u-navbar>

    <Detail v-if="current === 0" :valueData="pageInfo" @close="getPageInfo" />
    <List v-if="current === 1" :valueData="pageInfo.purchaseViewQuoteEnterpriseVO" :purchase="pageInfo.purchase" />

  </contents>
</template>
<script>
import { purchaseDetail, purchaseViewQuote } from '@/api/http/wantBuy'

import Detail from '@/components/wantBuyDetail'
import List from '@/components/wantBuyDetail/list'

export default {
  components: {
    Detail,
    List
  },
  data() {
    return {
      list: [
        {
          name: this.$t('locales.purchaseDetails')
        },
        {
          name: this.$t('locales.viewQuote')
        }
      ],
      current: 0,
      routerParams: {},

      pageInfo: {}
    }
  },
  onLoad(opt) {
    this.routerParams = opt
    if (opt.type) {
      this.current = Number(opt.type)
    }
    this.tabsChange(Number(opt.type) || 0)
  },
  methods: {
    tabsChange(index) {
      this.current = index
      if (index === 0) {
        this.getPageInfo()
      } else {
        this.getPageList()
      }
    },

    async getPageInfo() {
      const res = await purchaseDetail({
        id: this.routerParams.id
      })
      if (res.code === 200) {
        this.pageInfo = res.data
      }
    },

    async getPageList() {
      const res = await purchaseViewQuote({
        id: this.routerParams.id
      })
      if (res.code === 200) {
        this.pageInfo = res.data
      }
    }
  }
}
</script>
<style lang="scss">
.wantBuy-detail {
  .navbar-tabs {
    width: 100%;
    padding-right: 44px;
    display: flex;
    justify-content: center;
  }
}
</style>